import React from 'react'
import { Col, Drawer, Form, Button, Row, InputNumber, message } from 'antd'
import { Loader } from 'components'
import LwjTable from 'components/LwjTable/LwjTable'
import style from './index.less'

const CartModal = ({
  dispatch,
  visible,
  list,
  totalChannelPrice,
  totalRetailPrice,
  totalPrice,
  count,
  effects
}) => {

  const hideCartModal = (flag, currentItem) => {
    dispatch({
      type: 'orderSalesmarket/hideCartDrawer'
    })
  }

  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 12, offset: 0},
      sm: {span: 12, offset: 0},
    }
  }

  const confirmEditModal = () => {
    validateFields((err, values) => {
      if (!err) {
        let params = {
          distributorDisplayName: values.displayName,
          transferToBalanceStatus: values.transferToBalanceStatus == '1' ? true : false,
          enabled: values.enabled == '1' ? true : false,
          score: (values.score != null) ? parseInt(values.score) : null,
          version: item.version,
          id: item.id
        }
        dispatch({
          type: 'distributorList/editDistributor',
          params: params
        })
      }
    })
  }

  // 列表相关
  const listProps = {
    dataSource: list,
    dispatch,
    location,
    locale:{
      emptyText:"您的购物车是空的"
    }
  }
  
  const productsColumns = [
    {
      title: '商品图片',
      dataIndex: 'coverPath',
      key: 'coverPath',
      width: '20%',
      render: (text, record, index) => (
        <img src={record.goods_info.cover_path} className={style.pitemImg} />
      )
    }, {
      title: '商品信息',
      dataIndex: 'name',
      key: 'name',
      width: '25%'
    }, {
      title: '零售价￥',
      dataIndex: 'price',
      key: 'price',
      width: '15%',
      render: (text, record, index) => (
        <div style={{ width: '100%' }}>
          <div className={style.pitem}>
             {record.price}
          </div>
        </div>
      )
    }, {
      title: '渠道价￥',
      dataIndex: 'channelPrice',
      key: 'channelPrice',
      width: '15%',
      render: (text, record, index) => (
        <div style={{ width: '100%' }}>
          <div className={style.pitem}>
             {record.channel_price}
          </div>
        </div>
      )
    }, {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
      width: '15%',
      render: (text, record, index) => (
        <div style={{ width: '100%' }}>
          <div className={style.pitem}>
            <InputNumber min={1} max={999} value={record.number} onChange={(value) => {updateCount(record, index, value+'')}} />
          </div>
        </div>
      )
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      width: '10%',
      render: (text, record, index) => (
        <span>
          <a onClick={() => deleteProducts(index)}>删除</a>
        </span>
      )
    }
  ]

  // 数量减
  const updateCount=(item, index, count)=>{
    count = count.replace(/\D/g,'');
    if(!count || (count == '') || (count == '0')){
      count = 1;
    }
    if(count && count > 999){
      count = 999;
    }
    list[index].number = parseInt(count);
    dispatch({
      type: 'orderSalesmarket/setCartList',
      cartList: list
    })
  }

  const deleteProducts = (index) => {
    list.splice(index, 1);
    dispatch({
      type: 'orderSalesmarket/setCartList',
      cartList: list
    })
  }

  const goCartCaluate = () => {
    if(!list || list.length == 0){
      message.error("请添加结算商品！");
      return;
    }
    dispatch({
      type: 'orderSalesmarket/goCartCaluate',
      cartList: list,
      totalNumber: count,
      totalChannelPrice: totalChannelPrice
    })
  }

  return (    
    <Drawer
      title="已选中商品"
      width={600}
      onClose={hideCartModal}
      visible={visible}
      destroyOnClose={true}
      style={{
        overflow: 'auto',
        height: 'calc(100% - 108px)',
        paddingBottom: '108px',
      }}
      className={style.cartModal}
    >
      <LwjTable {...listProps} columns={productsColumns} pagination={false}/>
      <Row className={style.price}>
          <Col span={4}offset={12}>
              <p>渠道提货总价</p>
              <p className={style.jiage}>{totalChannelPrice}</p>
          </Col>
          <Col span={4}>
              <p>建议零售总价</p>
              <p className={style.jiage}>{totalRetailPrice}</p>
          </Col>
          <Col span={4}>
              <p>商品总数</p>
              <p className={style.jiage}>{count}</p>
          </Col>              
          <Col span={24} className={style.totalprice}>                  
          </Col> 
          <Col span={4} offset={20}>
            <p>总价</p>
            <p className={style.jiage}>{totalPrice}</p>
          </Col>               
      </Row>
      <div
        style={{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }}
      >
        <Button onClick={hideCartModal} style={{ marginRight: 8 }}>
          关闭
        </Button>
        <Button onClick={hideCartModal} type="primary" onClick={goCartCaluate}>
          去结算
        </Button>
      </div>
    </Drawer>
  )
}

export default Form.create()(CartModal)